<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #sty{
            width: 50px;
            height: 50px;
            background-color: black;
            display: block;
            margin: auto;
        }
    </style>
</head>
<body>
    <button id="width">变宽</button>
    <button id="hight">变高</button>
    <button id="color">变色</button>
    <button id="hide">隐藏</button>
    <button id="clear">重置</button>
    <div id="sty"></div>

</body>
<script>
    // 获取宽按钮
    let wid=document.getElementById('width')
    // 获取高按钮
    let hig=document.getElementById('hight')
    // 获取变色按钮
    let col=document.getElementById('color')
    // 获取隐藏按钮
    let hid=document.getElementById('hide')
    // 获取重置按钮
    let cle=document.getElementById('clear')
    // 获取div方块
    let box=document.getElementById('sty')
    //改变div方块的宽度
    wid.onclick=function(){
        box.style.width='100px'
    }
    //改变div方块的高度
    hig.onclick=function(){

        box.style.height='100px'
    }
    col.onclick=function(){
        box.style.backgroundColor='red'
    }
    hid.onclick=function(){
        box.style.display='none'
    }
    cle.onclick=function(){
        box.style.height='50px'
        box.style.width='50px'
        box.style.display='block'
        box.style.backgroundColor='black'
    }
</script>
</html>